
(function () {

  let drawRect = {
    name: '绘制矩形',
    description: `
      name: '绘制矩形',
      step: [
      ],
      api: [
        'fillRect(x,y,w,h) 填充矩形',
        'strokeRect(x,y,w,h) 矩形边框',
        'clearRect(x,y,w,h)  清空指定位置大小的矩形区域',
      ],
      need: ['1.绘制一个x:10,y:10,w:100,h:100填充矩形,清空x:20,y:20,w:80,h:80区域,再绘制* 一个x:30,y:30,w:60,h:60的矩形边框'],
      `,
    width: 300,
    height: 300,
    demo: function (canvas, ctx) {
     ctx.fillRect(10, 10, 100, 100)
  ctx.clearRect(20,20,80,80)
  ctx.strokeRect(30, 30, 60, 60)
    },
  };
  
  let drawArc = {
    name: '圆形',
    description: `
      name: '绘制路径',
      step: [
        '1.开始绘制路径',
        '2.起笔点',
        '3.结束点，结束点可以多个',
        '4.最后一个结束点位置在开始的位置，进行路径关闭',
      ],
      api: [
        'beginPath() 创建一条路径',
        'moveTo(x,y) 起始点设置',
        'lineTo(x,y) 绘制路径',
        'stroke() 根据路径绘制矩形边框',
        'fill()  根据路径填充矩形',
        'closePath() 关闭路径',
      ],
      need: ['1.绘制一个三角形'],
      `,
    width: 300,
    height: 300,
    demo: function (canvas, ctx) {
      ctx.beginPath();
      ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
      ctx.moveTo(90, 80);
      ctx.arc(80, 80, 10, 0, Math.PI, true);
      ctx.moveTo(85, 80);
      ctx.arc(80, 80, 5, 0, Math.PI * 2, true);
      ctx.moveTo(130, 80);
      ctx.arc(120, 80, 10, 0, Math.PI, true);
      ctx.moveTo(125, 80);
      ctx.arc(120, 80, 5, 0, Math.PI * 2, true);
      ctx.moveTo(105, 100);
      ctx.arc(100, 100, 5, 0, Math.PI * 2, false);
      ctx.moveTo(120, 120);
      ctx.arc(100, 120, 20, 0, Math.PI, false);
      ctx.stroke();
    },
  };
  
  /**
   * 二次贝尔曲线
   *
   */
  
  /**
   * 三次贝尔曲线
   *
   */
   
  let drawPath2D = {
    name: 'path2d对象',
    description: `
      name: "圆形",
      step: [
        '1.弧度=(Math.PI/180)*角度。',
        '2.将路径缓存起来，然后通过调用fill(),stroke方法绘制图形'
      ],
      api: [
        'Path2D() ',
      ],
      need: [' 1.用path2d 定义一些路径','1.绘制一张笑脸'],
      `,
    width: 100,
    height: 100,
    demo: function (canvas, ctx) {
      let rectangle = new Path2D();
      rectangle.moveTo(30, 30);
      rectangle.arc(30, 30, 10, 0, 2 * Math.PI);
      ctx.stroke(rectangle);
    },
  };


  let code = {
    name: '绘制形状',
    list: [drawPath2D, drawArc,drawRect],
  };

  //初始化函数
  mainData = code;
  watchScriptInit();
})();
